<template>
  <div class="appealReview">
    <div class="appealReview-header">
      <!-- 列表查找 -->
      <orderStatistics :myInfo ='myInfo'  @getData='getTableData'/>
      <div class="search-wrap header_search">
        <table-search
          class='clearfloat'
          ref="table-search"
          :selectHead="selectHead"
          @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>


    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      height="88%">
      <el-table-column show-overflow-tooltip label="ID" width="60" align="center">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*tableSize }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="订单编号" align="left" prop='order_number' sortable='custom' min-width="200"></el-table-column>
      <el-table-column show-overflow-tooltip label="审核状态" align="center" prop='status' sortable='custom' min-width="140">
        <template slot-scope="scope">
          {{ scope.row.status | appealStatus }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="代理人" align="center" prop='agent' sortable='custom' min-width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.agent">{{ scope.row.agent.name }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="质量分" align="center" prop='quelity' sortable='custom' min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.grades">{{ scope.row.grades.quelity }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="态度分" align="center" prop='attitude' sortable='custom' min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.grades">{{ scope.row.grades.attitude }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="耗时分" align="center" prop='take_time' sortable='custom' min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.grades">{{ scope.row.grades.take_time }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="总体服务分" align="center" prop='total_score' sortable='custom' min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.grades">{{ scope.row.grades.total_score }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="用户评价" align="left" prop='remark' sortable='custom' min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.grades">{{ scope.row.grades.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="申诉原因" align="left" prop='remarks' sortable='custom' min-width="150"> </el-table-column>
      <el-table-column show-overflow-tooltip label="申诉项目" align="left" prop='subject' sortable='custom' min-width="150"> </el-table-column>
      <el-table-column show-overflow-tooltip label="审核意见" align="left" prop='auditor_remarks' sortable='custom' min-width="150"> </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status != 0" @click="review(scope.row)" type="warning" size="small">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination @paginationChange="paginateChange" :total="total"></pagination>
    <reviewDialog ref="reviewDialog" @refresh='getTableData'/>
  </div>
</template>

<script>
import orderStatistics from "~/components/orderStatistics"
import { getMyInfo } from "~/api/user"
import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import reviewDialog from "./components/review-dialog"
export default {
  data () {
    return {
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      pageSizes: [25, 50], //一页可以几条,
      currentPage: 1, //目前在第几页
      current_page: 0,
      tableSize: 25, //一页几条
      total: 0,
      paramsByAppeal: {

      },
      myInfo: {
        agent_grades_appeal : 0
      },
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '审核状态',
          props: 'status'
        },
        {
          label: '代理人',
          props: 'agent_id'
        },
        {
          label: '申诉项目',
          props: 'subject'
        },

      ],
      search_params: {}
    }
  },
  components: {
    Pagination,
    orderStatistics,
    tableSearch,
    reviewDialog
  },
  created () {
    this.getTableData()
  },
  methods: {
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
        this.roleID = this.myInfo.role_id
      }
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.paramsByAppeal, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.$axios.get('api/grades/appeals/auditor', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
          this.getMyinfo()
        } else {
          this.$message.error('服务器繁忙')
        }
      })
    },

    searchMethods(params, no_search) {
      this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (params.time) {
        this.search_params.start_time = params.time[0]
        this.search_params.end_time = params.time[1]
        delete this.search_params.time
      }
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByAppeal.sort_str = column.prop
        this.paramsByAppeal.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByAppeal.sort_str = column.prop
        this.paramsByAppeal.sort_order = 'asc'
      } else {
        delete this.paramsByAppeal.sort_str
        delete this.paramsByAppeal.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },
    review(data) {
      this.$refs['reviewDialog'].show(data)
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .appealReview {
    height: 100%; //撑满表格
    .appealReview-header {
      margin-bottom: 20px;
      .header_search {

        float: right;
      }
    }
    .el-table {
      width: 99.9% !important;
    }
  }
</style>
